<template>
  <Modal v-model="drawer.show" :closable="drawer.status == 'read'"
    :width="80" :mask-closable="false" :styles="styles" >
    <span slot="header" :style="titleStyle">{{ lang.register }}
      <span style="font-weight: 600;">{{modalTitle}}</span>
    </span>
    <div slot="footer">
      <Button v-if="drawer.status!=='read'" @click="onCancel">{{ $t(`global.cancel`) }}</Button>
      <Button type="primary" class="ivu-ml" @click="onOk"
        >{{ drawer.status!=='read' ? $t(`global.save`) : $t(`global.close`) }}</Button>
    </div>
    <div v-if="drawer.show && classObject.record && hierObject.hierProperties" :style="bodyStyle"
      class="c-modalHier">
      <Form v-if="!isWorkcenter"
        :model="hierObject.hierProperties" :label-width="90" label-position="right">
        <FieldItem
          v-model="hierObject.hierProperties.type" @change="typeChange"
          :config="{ ...fieldType.config, disabled: isInstance }"
          :formItemProps="{label: lang.type, prop: hierObject.hierProperties.type, }"
        />
      </Form>
      <component v-show="hierObject.hierProperties && hierObject.hierProperties.type" ref="_hier"
        :is="isWorkcenter ? 'workCenterHier' : `cfg-hier-${hierObject.hierProperties.type}`"
        :hierObject="hierObject"
        :isInstance="isInstance" :modelFieldList="modelFieldList" @nodeSelect="nodeSelect"/>
    </div>
    <!-- <Button @click="submit">submit</Button> -->
  </Modal>
</template>

<script>
import listModel from 'public/model/model/hier/listModel'
import dictionaryModel from 'public/model/model/hier/dictionaryModel'
import chainModel from 'public/model/model/hier/chainModel'
import treeChainModel from 'public/model/model/hier/treeChainModel'
import treeModel from 'public/model/model/hier/treeModel'
import treeWorkCenterModel from 'public/model/model/hier/treeWorkCenterModel'
import workCenterHier from './workCenter-tree.vue' // dictionary tree

export default {
  name: "cfgModalHier",
  data() {
    return {
        styles: {top: '50px', maxWidth: '1200px'},
        titleStyle: {},
        bodyStyle: {},
        labelWidth: 120,
        labelPosition: 'right',
        modelFieldList: [],
        hierObject: {},
        hierTypeObj: {
          listModel, dictionaryModel, treeModel, chainModel, treeChainModel, treeWorkCenterModel
        },
        propKey: this.isInstance ? 'hier' : 'hierProperties',
        isWorkcenter: false,
        nodeData: {},
        fieldType: {
          key: 'type',
          config: {
            type: 'select',
            options: ['list', 'dictionary', 'tree', 'chain', 'treeChain'].map(item => ({
              label: item, value: item
            }))
          }
        }
    }
  },
  methods: {
    // 提交添加或修改数据
    onOk() {
      if (this.drawer.status === 'read') {
        this.$emit('submit');
        // this.drawer.show = false
        return
      }
      if (!this.isInstance) {
        if (this.$refs._hier.checkValues()) { // 校验properties的数据
          this.hierObject.formatContent()      // 格式化hierProperties的数据

          this.classObject.record.hierProperties = this.hierObject.hierProperties
          this.classObject.record.web = this.hierObject.web
        } else {
          return
        }
      }
      this.$emit('submit')
      this.$emit('nodeSelect', {...this.classObject.record, ...this.nodeData})
    },
    onCancel() {
      this.drawer.show = false
      this.$emit('nodeSelect', {...this.classObject.record, ...this.nodeData})
    },
    submit() {
      console.log("🚀 ~ file: cfgModalHier.vue:50 ~ submit", this.hierObject.hierProperties)
    },
    // 动态生成当前实例对应的字段表
    calcModelFields() {
      if (this.isInstance && this.classObject.record && this.classObject.record.className) {
        this.modelFieldList = this.classObject.calcModelFields(this.modelList, this.classObject.record)
      }
    },
    typeChange(val) {
      this.initHierObject(val)
    },
    initHierObject(type, hierProperties={}) {
      if (this.classObject.record.type === 'workCenter') {
        this.hierObject = new this.hierTypeObj.treeWorkCenterModel(hierProperties) 
        
        this.isWorkcenter = true
      } else {
        this.hierObject = new this.hierTypeObj[`${type || 'list'}Model`](hierProperties);
      }
      this.hierObject.hasProperties = true
    },
    nodeSelect(data) {
      this.nodeData = data
    }
  },
  watch: {
    'drawer.show'(val) {
      if (val) {
        let record = this.classObject.record
        let hierProperties = this.classObject && record && record[this.propKey] ? record[this.propKey] : {}
        let type = hierProperties.type

        hierProperties.content && (hierProperties.content = hierProperties.content.map(item => {
          return {
            ...item,
            statusProperties: item.statusProperties || []
          }
        }))
        this.initHierObject(type, hierProperties)
        this.calcModelFields()
        // let prop = this.isInstance ? 'hier' : 'hierProperties'
      }
    },
  },
  computed: {
    lang() {
      return {
        "en-US": {
          edit: 'edit',
          new: 'new',
          read: 'read',
          action: 'action',
          submit: 'submit',
          register: 'register',
          sameName: 'same name',
          type: 'type',
        },
        "zh-CN": {
          edit: '编辑',
          new: '添加',
          read: '查看',
          action: '操作',
          submit: '提交',
          register: '注册',
          sameName: '名称相同',
          type: '模板类型',
        },
      }[this.G_Locale]
    },
  },
  props: {
    drawer: {
      default: () => {
        return {
          status: 'edit', // new edit read
          show: true,
        };
      }
    },
    classObject: {
      default() {
        return null
      }
    },
    collectionObject: {
      default() {
        return null
      }
    },
    modelList: {
      default() {
        return []
      }
    },
    modalTitle: {
      default: ''
    },
    isInstance: {
      default: false
    },
  },
  components: {workCenterHier},
}
</script>

<style lang="less">
.c-modalHier {
  .propertyWp {
    padding: 0 12px;
  }
}
</style>